<?php $this -> load -> view('header'); ?>
<style>
	body .modal {
		  width: 77%; /* desired relative width */
		  left: 5%; /* (100%-width)/2 */
		  /* place center */
		  margin-left:auto;
		  margin-right:auto;
		}
		.fade{
		    -webkit-transition-delay: .5s;  // make this however long you need
		    transition-delay: .5s;
		 }
</style>
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
	<?php //$this->load->view('sidebar');?>
	<!-- BEGIN PAGE -->
	<div class="page-content">
		<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<div id="portlet-config" class="modal hide">
			<div class="modal-header">
				<button data-dismiss="modal" class="close" type="button"></button>
				<h3>portlet Settings</h3>
			</div>
			<div class="modal-body">
				<p>
					Here will be a configuration form
				</p>
			</div>
		</div>
		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<!-- BEGIN PAGE CONTAINER-->
		<div class="container-fluid">
			<!-- BEGIN PAGE HEADER-->
			<div class="row-fluid">
				<div class="span12">
					<!-- BEGIN PAGE TITLE & BREADCRUMB-->
					<h3 class="page-title"> Laporan Final </h3>
					<?php $this -> load -> view('breadcrumb'); ?>
					<!-- END PAGE TITLE & BREADCRUMB-->
				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row-fluid">
				<div class="span12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet box blue">
						<div class="portlet-title">
							<h4><i class="icon-edit"></i>Rekapitulasi Laporan Final</h4>
								<?php if ($initProfile == 11 || $initProfile == 7 || $initProfile == 10) { ?>
								<div class="actions">
									<a href="<?php echo base_url("report/exportExcelAll"); ?>" class="btn blue"><i class="icon-table"></i> Export to Excel</a>
								</div>
								<?php } ?>
							<!--<div class="tools" >
								<a href="javascript:;" class="reload"></a>
							</div>-->
														
							<div class="actions" style="padding-right: 0px">
								<!--<a href="<?php echo base_url()?>report/rekapTrainingParticipant" class="btn green"><i class="icon-print"></i>PDF</a>-->
						<!--		<a href="#" class="btn green"><i class="icon-tasks"></i> Pdf</a>
								<a href="#" class="btn green"><i class="icon-envelope"></i> Excel</a>-->								
							</div>
							
						</div>
						<div class="portlet-body">
							<div class="span3">
							<?php $this->load->view('report/searchBar');?>
							</div>
							<div class="span9">
								<table class="table table-striped table-hover table-bordered" id="tabelTipeBerkas">
									<thead>
									  <tr>
									    <th >No</th>
									    <th >Nama Kab/Kota</th>
									    <th >Nama Desa</th>
									    <th >Jenis Laporan</th>
									    <th >Rincian Laporan</th>
									    <th >Jumlah Laporan</th>
									  </tr>								  
									</thead>
									<tbody>
										<?php 
											$i=1;
											foreach ($reports as $row){
												$rincianLaporan = "";
												if ($row['tipeBerkasId'] == "TRAINING"){
													$rincianLaporan = $row['rincianTraining'];
												} else if ($row['tipeBerkasId'] == "LKPM"){
													$rincianLaporan = $row['rincianLkpm'];
												} else if ($row['tipeBerkasId'] == "LAS"){
													$rincianLaporan = $row['rincianAsistensi'];
												}
												echo '<TR style="cursor: pointer;" onclick="findLaporanDetil(\''.$row['propinsiId'].'\',\''.$row['distrikId'].'\',\''.$row['desaId'].'\',\''.$row['tipeBerkasId'].'\')">'
									      				.'<TD>' . $i . '</TD>'
									      				.'<TD style="text-align: left">' . $row['namaDistrik'] . '</TD>'
									      				.'<TD style="text-align: left">' . $row['namaDesa'] . '</TD>'
									      				.'<TD style="text-align: left">' . $row['tipeBerkas']. '</TD>'
									      				.'<TD style="text-align: left">' . $rincianLaporan. '</TD>'
									      				.'<TD>' . $row['jumlahBerkas'] . '</TD>'
													 .'</TR>';
												$i++;	 
											}
										?>
									</tbody>
								</table>
							
								<table class="table table-striped table-hover table-bordered" id="tabelTraining" style="display: none">
									<thead>
									  <tr>
									    <th rowspan="2">No</th>
									    <th rowspan="2" >Jenis Pelatihan</th>
									    <th rowspan="2">Jumlah Laporan</th>
									    <th rowspan="2">Jumlah Peserta</th>   
									    <th colspan="2">Staff</th>
									    <th colspan="2">Non Staff</th>
									    <th colspan="2">Total</th>  
									    <th rowspan="2">Lainnya</th>
									    
									  </tr>
									  <tr>
									    <th>Laki-Laki</th>
									    <th>Perempuan</th>
									    <th>Laki-Laki</th>
									    <th>Perempuan</th>
									    <th>Laki-Laki</th>
									    <th>Perempuan</th>
									    <!--<th>Laki-Laki</th>
									    <th>Perempuan</th>-->
									  </tr>								  
									</thead>
									<tbody>
										
									</tbody>
								</table>
							</div>
							
							<div class="row-fluid">
								<?php //$this->load->view('paging', $pBerkas);?>
							</div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
			<!-- END PAGE CONTENT -->
			
			<div class="row-fluid" id="divLaporanDetil" style="display : none">
				<div class="span12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet box blue">
						<div class="portlet-title">
							<h4><i class="icon-edit"></i>Daftar Laporan Detil</h4>
							<!--<div class="tools" >
								<a href="javascript:;" class="reload"></a>
							</div>-->
														
							<div class="actions" style="padding-right: 0px">
								<!--<a href="<?php echo base_url()?>report/rekapTrainingParticipant" class="btn green"><i class="icon-print"></i>PDF</a>-->
						<!--		<a href="#" class="btn green"><i class="icon-tasks"></i> Pdf</a>
								<a href="#" class="btn green"><i class="icon-envelope"></i> Excel</a>-->								
							</div>
							
						</div>
						<div class="portlet-body">
							<table class="table table-striped table-hover table-bordered" id="tabelBerkasDetil">
								<thead>
								  <tr>
								    <th >No</th>
								    <th >Nama Perpustakaan</th>
									<th >Jenis Laporan</th>
									<!--<th >Rincian Laporan</th>-->
									<th >Tanggal Mulai Kegiatan </th>
									<th >Tanggal Selesai Kegiatan</th>
									<th >Pelapor</th>
									<th >Tindakan</th>				    
								  </tr>								  
								</thead>
								<tbody>
									
								</tbody>
							</table>
							<div class="row-fluid">
								<?php //$this->load->view('paging', $pBerkas);?>
							</div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>

			
		</div>
		<!-- END PAGE CONTAINER-->
	</div>
	<!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<div id="alertModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel2">Laporan Kegiatan</h3>
	</div>
	<div class="modal-body" id="alertMessage">
		
		 <iframe id="frameLap" frameborder="0" width="100%" height="400" id="iframe" ></iframe>
		 
	</div>
	<div class="modal-footer">
		<button data-dismiss="modal" class="btn green">OK</button>
		<button class="btn green" id="btnCetakPDF">Cetak PDF</button>
	</div>
</div>
<div id="laporanDiv" style="display: none">
	<input type="hidden" id="idLaporan"/>
</div>

<!--<div class="modal hide fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 300;top: calc(50% - 200px) !important;left: calc(50% - 150px) !important;">-->
<div class="modal hide fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
       <h3>Mencari data...</h3>
    </div>
    <div class="modal-body">
       <div class="progress progress-striped active">
           <div class="bar" style="width: 100%;"></div>
       </div>
 	</div>
</div>
<?php $this->load->view('footer')?>

<script>
var oTable = '';

	$(document).ready(function() {
		//var baseUrl = 'http://localhost/perpus/';
		oTable = $('#tabelTipeBerkas').dataTable({
          "bProcessing" : true,
          "sScrollY" : "300",
          "bScrollCollapse" : true,
          // "bServerSide": true,
          "bSort" : true,
            "aLengthMenu": [
                [10, 50, 100, -1],
                [10, 50, 100, "Semua"]
            ],
            "iDisplayLength": 10,
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ laporan per halaman",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },
	        columnDefs: [ {
	            targets: [ 1 ],
	            orderData: [ 0, 1 ]
	        }, {
	            targets: [ 2 ],
	            orderData: [ 1, 0 ]
	        }, {
	            targets: [ 3 ],
	            orderData: [ 4, 0 ]
	        } ],
            "order": [[ 1, "asc" ]]
            // "columns": [
                // { "orderDataType": "dom-text", "type": "numeric" },
                // { "orderDataType": "dom-text"},
                // { "orderDataType": "dom-text"},
                // { "orderDataType": "dom-text"},
                // { "orderDataType": "dom-text", "type": "numeric" }
            // ]
        });

        /*
        $('#tabelBerkasDetil').dataTable({
            "aLengthMenu": [
                [10, 25, 50, -1],
                [10, 50, 100, "Semua"]
            ],
            "iDisplayLength": 10,
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ laporan per halaman",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            }
        });
        */
		
		$('#distrik').on('change', function(e) {
		    console.log("district value changed");
		    	var distrikId = $('#distrik').val();
		    	if (distrikId == "-1"){
		    		return;
		    	}
		    	// GET LIBRARY COMBOBOX
		    	$("#desa").empty();
				$("#desa").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
		    	$.ajax({
				  url: "<?php echo base_url()?>reference/desaByDistrik/"+distrikId,
				  success: function(data){
				  	 	/*if (data.error == 1){
				  			console.log("ERROR FETCHING DISTRIK");						
				  		} 				  		
				  	 	if (data.success == 1){
				  	 		
				  	 	} */
				  	 	
				  	 	$.each(data, function(key, val) {
							 $("#desa").append($("<option></option>")
							 .attr("value", val.value).text(val.nama));
						});
						$('#desa').trigger("liszt:updated");
				  },
				  dataType: "json"
				});
				// END GET LIBRARY COMBOBOX
		  });
		  
		  $('#propinsi').on('change', function(e) {
		    console.log("propins value changed");
		    	var distrikId = $('#propinsi').val();
		    	if (distrikId == "-1"){
		    		return;
		    	}
		    	// GET LIBRARY COMBOBOX
		    	$("#distrik").empty();
				$("#distrik").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
		    	$.ajax({
				  url: "<?php echo base_url()?>reference/distrikByPropinsi/"+distrikId,
				  success: function(data){
				  	 	/*if (data.error == 1){
				  			console.log("ERROR FETCHING DISTRIK");						
				  		} 				  		
				  	 	if (data.success == 1){
				  	 		
				  	 	} */
				  	 	
				  	 	$.each(data, function(key, val) {
							 $("#distrik").append($("<option></option>")
							 .attr("value", val.value).text(val.nama));
						});
						$('#distrik').trigger("liszt:updated");
				  },
				  dataType: "json"
				});
				// END GET LIBRARY COMBOBOX
		  });
		  
		  $('#tipeBerkas').on('change', function(e) {
		    	console.log("district value changed");
		    	if ($(this).val() == "TRAINING"){
		    		// GET LIBRARY COMBOBOX
			    	$("#rincianLaporan").empty();
					$("#rincianLaporan").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
			    	$.ajax({
					  url: "<?php echo base_url()?>reference/jenisTrainingJP2",
					  success: function(data){
					  	 	$.each(data, function(key, val) {
								 $("#rincianLaporan").append($("<option></option>")
								 .attr("value", val.value).text(val.nama));
							});
							$('#rincianLaporan').trigger("liszt:updated");
					  },
					  dataType: "json"
					});
		    	} else if ($(this).val() == "LKPM") {
		    		// GET LIBRARY COMBOBOX
			    	$("#rincianLaporan").empty();
					$("#rincianLaporan").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
			    	$.ajax({
					  url: "<?php echo base_url()?>reference/jenisKegiatan",
					  success: function(data){
					  	 	$.each(data, function(key, val) {
								 $("#rincianLaporan").append($("<option></option>")
								 .attr("value", val.value).text(val.nama));
							});
							$('#rincianLaporan').trigger("liszt:updated");
					  },
					  dataType: "json"
					});		    		
		    	} else if ($(this).val() == "LAS") {
		    		// GET LIBRARY COMBOBOX
			    	$("#rincianLaporan").empty();
					$("#rincianLaporan").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
			    	$.ajax({
					  url: "<?php echo base_url()?>reference/kategoriAsistensi",
					  success: function(data){
					  	 	$.each(data, function(key, val) {
								 $("#rincianLaporan").append($("<option></option>")
								 .attr("value", val.value).text(val.nama));
							});
							$('#rincianLaporan').trigger("liszt:updated");
					  },
					  dataType: "json"
					});		    		
		    	} else {
		    		$("#rincianLaporan").empty();
					$("#rincianLaporan").append($("<option></option>").attr("value", "-1").text("--Semua--")); 
					$('#rincianLaporan').trigger("liszt:updated");
		    	}		   		 	
		  });
		  
		 $('#btnCari').click(function(){
		 	console.log("btnCari dispatch");
		 	// $('#pleaseWaitDialog').modal('show');
		 	$('#divLaporanDetil').hide();
		 	var propinsiId = $('#propinsi').val();
			var distrikId = $('#distrik').val();
			var desaId = $('#desa').val();
			var tipeBerkasId = $('#tipeBerkas').val();
			var rincianLaporan = $('#rincianLaporan').val();
			
			var url = '<?php echo base_url()?>report/findRekapLaporanByPropinsiDistrikDesaTipeAndRincian/' + propinsiId + '/'
				+ distrikId + "/" + desaId + "/" +tipeBerkasId + "/" + rincianLaporan;
				
				console.log(url);
				/*
				if (tipeBerkasId != "-1"){
				/*	if (tipeBerkasId == "TRAINING"){
						console.log("search : tipe laporan TRAINING");
					
						$.ajax({
							url : url,
							dataType : "json",
							success : function(data) {
								$('#tabelTipeBerkas').hide();
								$("#tabelTraining").show();
								$("#tabelTraining").find("tr:gt(1)").remove();
								if (data.result == "1"){
									var html = '';
									var i = 1;
									if (data.mapData.length == 0){
										//alert('Mohon maaf, Data yang Anda cari tidak ditemukan.');
										html += '<TR>'
											      + '<td colspan=11>Mohon maaf, Data yang Anda cari tidak ditemukan.</td>'
												  + '</TR>';
									} else {
										$.map(data.mapData, function(item) {
										var jmlhPeserta = "-";
										if (item.staffLaki + item.nonStaffLaki + item.staffPr + item.nonStaffPr > 0) 
											jmlhPeserta = parseInt(item.staffLaki) + parseInt(item.nonStaffLaki) + parseInt(item.staffPr) + parseInt(item.nonStaffPr);
											//console.log("var : " + item.staffLaki );	
											//console.log("var : " + item.nonStaffLaki );
											var staffLaki = "-";	
											if (item.staffLaki > 0) 
												staffLaki = item.staffLaki;
											var staffPr = "-";
											if (item.staffPr > 0) 
												staffPr = item.staffPr;
											var nonStaffLaki = "-";	
											if (item.nonStaffLaki > 0) 
												nonStaffLaki = item.nonStaffLaki;
											var nonStaffPr = "-";	
											if (item.nonStaffPr > 0) 
												nonStaffPr = item.nonStaffPr;										
											var totalLaki = "-";
											if (item.staffLaki + item.nonStaffLaki > 0) 
												totalLaki = parseInt(item.staffLaki) + parseInt(item.nonStaffLaki);
											var totalPr = "-";
											if (item.staffPr + item.nonStaffPr > 0) 
												totalPr = parseInt(item.staffPr) + parseInt(item.nonStaffPr);
											var totalLainnya = "-";
											if (item.lainnyaLaki + item.lainnyaPr > 0) 
												totalLainnya = parseInt(item.lainnyaLaki) + parseInt(item.lainnyaPr);
												 					
											html += '<TR style="cursor: pointer;" onclick="findLaporanDetil(\''+ propinsiId + '\',\'' + distrikId + '\',\'' + desaId + '\',\'' + tipeBerkasId + '\')">'
											      + '<td >' + i + '</td>'
												  + '<td style="text-align: left">' + item.jenisTraining + '</td>'
												  + '<td> ' + item.jumlahBerkas + '</td>'
											      + '<td> ' + jmlhPeserta + '</td>' 
												  + '<td> ' + staffLaki + '</td>'										
												  + '<td> ' + staffPr + '</td>'
											      + '<td> ' + nonStaffLaki + '</td>'
											      + '<td> ' + nonStaffPr + '</td>'
											      + '<td> ' + totalLaki + '</td>'
											      + '<td> ' + totalPr + '</td>'
											      + '<td> ' + totalLainnya + '</td>'
												  + '</TR>';
											i++;		
										});
									}
									
									
									$('#tabelTraining tr:last').after(html);
								}	
							}					
						});
					} else { 
						$.ajax({
							url : url,
							dataType : "json",
							success : function(data) {
								$("#tabelTraining").hide();
								$("#tabelTipeBerkas").show();
								$("#tabelTipeBerkas").find("tr:gt(0)").remove();
								if (data.result == "1"){
									var html = '';
									var i = 1;
									//alert(data.mapData.length);
									if (data.mapData.length == 0){
										//alert('Mohon maaf, Data yang Anda cari tidak ditemukan.');
										html += '<TR>'
											      + '<td colspan=11>Mohon maaf, Data yang Anda cari tidak ditemukan.</td>'
												  + '</TR>';
									} else {
										$.map(data.mapData, function(item) {
											html += '<TR style="cursor: pointer;" onclick="findLaporanDetil(\''+ item.propinsiId + '\',\'' + item.distrikId + '\',\'' + item.desaId + '\',\'' + item.tipeBerkasId + '\')">'
											      + '<TD>' + i + '</TD>'
											      + '<TD style="text-align: left">' + item.namaDistrik + '</TD>'
											      + '<TD style="text-align: left">' + item.namaDesa + '</TD>'
											      + '<TD style="text-align: left">' + item.tipeBerkas + '</TD>'
											      + '<TD>' + item.jumlah + '</TD>'
													+ '</TR>';
											i++;		
										});
									}	
									$('#tabelTipeBerkas tr:last').after(html);
								}	
							}					
						});
					//}					
				} else { */
					$.ajax({
						url : url,
						dataType : "json",
						success : function(data) {
							$("#tabelTraining").hide();
							$("#tabelTipeBerkas").show();
							  oTable.fnClearTable();

							if (data.result == "1"){
								var html = '';
								var i = 1;
								//alert(data.mapData.length);
								if (data.mapData.length == 0){
										//alert('Mohon maaf, Data yang Anda cari tidak ditemukan.');
										html += '<TR>'
											      + '<td colspan=6><div class="alert"><strong>Mohon maaf Data yang Anda cari tidak ditemukan</strong></div></td>'
												  + '</TR>';
								} else {
									// show export button if data exist
									$("input[name=Fpropinsi]").val(propinsiId);
									$("input[name=Fdistrik]").val(distrikId);
									$("input[name=Fdesa]").val(desaId);
									$("input[name=FtipeBerkas]").val(tipeBerkasId);
									$("input[name=FrincianLaporan]").val(rincianLaporan);
									<?php if ($initProfile == 11) { ?>
										$("#btnExportToExcel").show();
									<?php } ?>
									// var rows = [];
									$.map(data.mapData, function(item) {
										var rincianLap = '';
										if (item.tipeBerkasId == 'TRAINING'){
											rincianLap = item.rincianTraining;
										} else if (item.tipeBerkasId == 'LKPM'){
											rincianLap = item.rincianLkpm;
										} else if (item.tipeBerkasId == 'Las'){
											rincianLap = item.rincianAsistensi;
										}
										
										// rows[i-1] = [i, item.namaDistrik, item.namaDesa, item.tipeBerkas, rincianLap, item.jumlahBerkas];
						                // var addData = [];
						                // addData.push(i);
						                // addData.push(item.namaDistrik);
						                // addData.push(item.namaDesa);
						                // addData.push(item.tipeBerkas);
						                // addData.push(rincianLap);
						                // addData.push(item.jumlahBerkas);
										// oTable.fnAddData(addData);
										
										html = '<TR style="cursor: pointer;" onclick="findLaporanDetil(\''+ propinsiId + '\',\'' + item.distrikId + '\',\'' + item.desaId + '\',\'' + item.tipeBerkasId + '\')">'
										      + '<TD>' + i + '</TD>'
										      + '<TD style="text-align: left">' + item.namaDistrik + '</TD>'
										      + '<TD style="text-align: left">' + item.namaDesa + '</TD>'
										      + '<TD style="text-align: left">' + item.tipeBerkas + '</TD>'
										      + '<TD style="text-align: left">' + rincianLap + '</TD>'
										      + '<TD>' + item.jumlahBerkas + '</TD>'
												+ '</TR>';
										  oTable.fnAddTr( $(html)[0]
										  
										  );
												
										i++;		
									});
								}	
							}	
						}					
					});
				//}	 
				// $('#pleaseWaitDialog').modal('hide');	
				//$('#pleaseWaitDiv').modal('hide');		
		});
		
		findLaporanDetil = function (propinsiId,distrikId, desaId, tipeBerkasId) {
			console.log("findLaporanDetil Dispatch " + propinsiId + " : " + distrikId + " : " + desaId + " : " + tipeBerkasId);
			$('#divLaporanDetil').show();
			
			// var url = '<?php echo base_url()?>report/findLaporanDetilByDistrikDesaTipe/'
				// + distrikId + "/" + desaId + "/" +tipeBerkasId;
			var url = '<?php echo base_url()?>report/findLaporanDetilByPropinsiDistrikDesaTipe/' +
				propinsiId + '/' + distrikId + "/" + desaId + "/" +tipeBerkasId;	
			$.ajax({
				url : url,
				dataType : "json",
				success : function(data) {
					$("#tabelBerkasDetil").find("tr:gt(0)").remove();
					if (data.result == "1"){
						var html = '';
						var i = 1;
						$.map(data.mapData, function(item) {
							var tglKegMulai = "-";
							var tglKegSelesai = "-";
							if (item.tipeBerkasId == "TRAINING"){
								tglKegMulai = item.btFromDate;
								tglKegSelesai = item.btToDate;
							} else if (item.tipeBerkasId == "LAS") {
								tglKegMulai = item.blFromDate;
								tglKegSelesai = item.blToDate;
							} else if (item.tipeBerkasId == "LKPM") {
								tglKegMulai = item.blkpmFromDate;
								tglKegSelesai = item.blkpmToDate;								
							}
									html += '<TR style="cursor: pointer;">'
									      + '<TD>' + i + '</TD>'
									      + '<TD style="text-align: left">' + item.namaPerpus + '</TD>'
									      + '<TD style="text-align: left">' + item.namaTipeBerkas + '</TD>'
									      + '<TD >' + tglKegMulai + '</TD>'
									      + '<TD >' + tglKegSelesai + '</TD>'
									      + '<TD>' +  item.reporter + '</TD>'
									      //+ '<TD><a href="<?php echo base_url();?>report/cetakLaporanPDF/'+item.berkasId+'"> Lihat </a></TD>'
									      + '<TD><a href="#" onclick="lihatLaporan(\''+item.berkasId+'\')" class="btn blue-stripe""> Lihat </a></TD>'
											+ '</TR>';
									i++;		
						});
						$('#tabelBerkasDetil tr:last').after(html);
					}	
				}					
			});			
			// auto scrool 
			$('html, body').animate({
				scrollTop: $("#divLaporanDetil").offset().top
			}, 400);
 		}
 		
 		$('#alertModal').on('show', function () {
		       $(this).find('.modal-body').css({
		              width:'auto', //probably not needed
		              height:'auto'
		       });
		});
 		$("#alertModal").draggable({
      		handle: ".modal-header"
  		});
 		lihatLaporan = function (id){
 			$('#frameLap').attr('src', '<?php echo base_url().'report/finalReportHtml/';?>'+id);
 			$('#alertModal').modal('show');
 			$('#idLaporan').val(id);
 		}

		$('#btnCetakPDF').click(function(){
			var berkasId = $('#idLaporan').val();
			window.location = '<?php echo base_url().'report/cetakLaporanPDF/';?>' + berkasId ;			
		}); 		
	});
	
	 

</script>
